<template>
	<view>
		<swiper class="swiper-box" @change="swiperChange" :indicator-dots="false" :current="actIdx">
			<swiper-item v-for="(item,index) in list">
				<view class="swiper-item">
					<image :src="`../../static/hello${index+1}.png`" mode="aspectFit"></image>

					<view class="text-xl margin-tb">
						{{item.title}}
					</view>
					<view class="">
						{{item.des}}
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="ind-list">
			<view :class="index==actIdx?'active':''" v-for="(_,index) in list"></view>
		</view>
		
		<view class="padding flex justify-center">
			<button class="cu-btn bg-orange" @click="handelChange">{{actIdx<list.length-1?'下一步':'开启求职之路'}}</button>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
interface titType{
	"title":string,
	"des":string
}
const list:Array<titType> = [
	{"title":"得到你的梦想","des":"在我们的应用中的小工具"},
	{"title":"得到你的梦想","des":"在我们的应用中的小工具"},
	{"title":"得到你的梦想","des":"在我们的应用中的小工具"},
]
const actIdx = ref(0)
const swiperChange = (ev:any)=>{
	console.log(ev);
	let {current} = ev.detail
	actIdx.value = current
}
const handelChange = ()=>{
	if(actIdx.value<list.length-1)
	{
		actIdx.value++
	}
	else{
		uni.switchTab({
			url:'/pages/home/home'
		})
	}
}
//记录用户首次访问
uni.setStorage({
	key:'first',
	data:true
})
</script>

<style lang="scss">
page{
	background-color: #fff;
}
.swiper-box{
	height: 750upx;
	width: 750upx;
	margin-top: 70upx;
}
.swiper-item{
	height: 80%;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	view{
		width: 80%;
	}
	image{
		width: 100%;
		height: 100%;
		margin: 40upx 0;
	}
}
.ind-list{
	display: flex;
	justify-content: center;
	view{
		height: 20upx;
		width: 20upx;
		background-color: #999;
		border-radius: 10px;
		transition:all 0.5s;
		margin-left: 10upx;
	}
	.active{
		width: 60upx;
		background-color: #FD7753;
	}
}
</style>
